<template>
    <div class="setp" v-for="item in 4" :key="item">
        <div  :class="{'setp-left':true,'setp-active':(porps.active >= item)}">
            <div class="step-left__line">
                <img src="https://b.yzcdn.cn/vant/logo/github.svg" style="width:24px;height:24px;background:#000;border-radius:50%" alt="">
            </div>
        </div>
        <div class="setp-right">
            <slot>
                <div>
                    right{{ item }}
                </div>
            </slot>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, defineProps, computed } from "vue"
const porps = defineProps({
    height: {
        type: Number,
        default: 30
    },
    active:{
        type:Number,
        default:2
    }
})
const height = computed(() => {
    return porps.height + 'px'
})
</script>

<style lang="less" scoped>
@left:11px;
.setp {
    width: 100%;
    height: v-bind(height);
    display: flex;
    // flex-flow: column;
}

.setp-left {
    width: 50px;
    text-align: center;
    position: relative;
    .step-left__line {
        position: absolute;
        left: @left;
        height: 100%;
        background: #666;
        width: 2px;
        img{
            position: absolute;
            left:-@left;
        }
    }
}
.setp-active {
    .step-left__line{
        img{
            color: skyblue;
            background-color: skyblue !important;
        }
    }
}
.setp-right {
    flex: 1;
}

.setp:last-of-type .step-left__line {
    display: none;
}
</style>